import React, { useState } from 'react';
import { Button, InputNumber, message, Modal, Slider } from 'antd';
import styles from './index.module.less';
import { contractUnits } from '@/utils/helper';
import { wait } from '@/utils';
import { setLeverageApi } from '@/api';

const LeverModal: any = ({
  open,
  setOpen,
  contract,
  positionType,
  setPositionType,
  lever,
  setLever,
  getContractAccount,
  reload,
}: any) => {
  const [curType, setCurType] = useState<any>(positionType);
  const [curLever, setCurLever] = useState<any>(lever);
  const [confirmLoading, setConfirmLoading] = useState(false);

  const types = [
    { name: '全仓', value: 'all' },
    { name: '逐仓', value: 'zhu' },
  ];

  // 设置杠杆
  const handleOk = async () => {
    setConfirmLoading(true);
    await wait();
    localStorage.setItem('lever', JSON.stringify([positionType, lever]));
    let params: any = { contract: contract?.name };
    if (curType === 'zhu') {
      params.leverage = curLever;
    } else {
      params.leverage = 0;
      params.cross_leverage_limit = curLever;
    }
    const res: any = await setLeverageApi(params);
    setConfirmLoading(false);
    if (res.code !== 10000) {
      if (
        res?.msg === 'POSITION_HOLDING：can not switch isolated/cross margin when holding position'
      ) {
        message.error('持有仓位时不允许切换逐仓/全仓, 只能调整倍数哦');
        return;
      }
      message.error(res?.msg);
      return;
    }
    message.success('设置杠杆成功');
    localStorage.setItem('lever', JSON.stringify([curType, curLever]));
    setPositionType(curType);
    setLever(curLever);
    // getContractAccount(); // 合约账号
    reload();
    setOpen(false);
  };

  const handleCancel = () => {
    setOpen(false);
  };

  const marks: any = {
    [contract?.leverage_min]: `${contract?.leverage_min}X`,
    [contract?.leverage_max]: `${contract?.leverage_max}X`,
  };

  return (
    <>
      <Modal
        className={styles.LeverModal}
        title="杠杆调整"
        open={open}
        okText="确定"
        cancelText="取消"
        onOk={handleOk}
        onCancel={handleCancel}
        confirmLoading={confirmLoading}
      >
        <div className={`${styles.trap} xxx`}>
          <div className={`${styles.ltypew} center-v`}>
            {types.map((item: any) => (
              <div
                className={`${styles.litem} ${curType === item.value && styles.litemAct} `}
                onClick={() => setCurType(item?.value)}
                key={item?.value}
              >
                {item?.name}
              </div>
            ))}
          </div>
          <div className={`${styles.iptwrap} `}>
            <p className={`${styles.tbtn} `} onClick={() => setCurLever(Number(curLever) - 1)}>
              -
            </p>
            <InputNumber
              size="large"
              value={curLever}
              onChange={(value) => setCurLever(value)}
              style={{ width: '100%', background: 'rgb(248, 250, 253) ', textAlign: 'center' }}
            />
            <p className={`${styles.tbtn} `} onClick={() => setCurLever(Number(curLever) + 1)}>
              +
            </p>
          </div>
          <div className={`${styles.buchang} xxx`}>
            <Slider
              marks={marks}
              step={1}
              max={Number(contract?.leverage_max) || 100}
              // min={contract?.leverage_min || 1}
              value={curLever}
              onChange={(value) => setCurLever(value)}
              style={{ width: '100%' }}
            />
          </div>
        </div>
      </Modal>
    </>
  );
};

export default LeverModal;
